<template>
  <page-card title="系统设置">
    <a-form :form="form"
            :label-col="{ span: 6 }"
            :wrapper-col="{ span: 12 }">
      <a-form-item label="ID"
                   v-show="false">
        <a-input v-decorator="['id']" />
      </a-form-item>
      <a-form-item label="系统名称">
        <a-input allowClear
                 :maxLength="200"
                 placeholder="请输入系统名称"
                 v-decorator="['sysName', {
                   rules: [{
                     required: true,
                     message: '请输入系统名称'
                   }]
                 }]" />
      </a-form-item>
      <a-form-item label="系统logo">
        <z-image-uploader :isQuery="imgUpload.isQuery"
                          :showUploadList="imgUpload.showUploadList"
                          :parentId="parentId"
                          :bucketName="imgUpload.bucketName"
                          :systemName="imgUpload.systemName"
                          :limit="imgUpload.limit"
                          :prop="fileList"
                          configGroup="imgUpload.configGroup"
                          ref="imgUploader"
                          v-model="fileList" />
      </a-form-item>

      <a-form-item label="登录页背景图">
        <z-image-uploader :isQuery="backGroundImgUpload.isQuery"
                          :showUploadList="backGroundImgUpload.showUploadList"
                          :parentId="parentId"
                          :bucketName="backGroundImgUpload.bucketName"
                          :systemName="backGroundImgUpload.systemName"
                          :limit="backGroundImgUpload.limit"
                          :prop="backGroundImgList"
                          configGroup="backGroundImgUpload.configGroup"
                          ref="backGroundImgUploader"
                          v-model="backGroundImgList" />
      </a-form-item>
      <a-form-item label="移动端banner"
                   v-if="!enabled">
        <z-image-uploader :isQuery="moblieImgUpload.isQuery"
                          :showUploadList="moblieImgUpload.showUploadList"
                          :parentId="parentId"
                          :bucketName="moblieImgUpload.bucketName"
                          :systemName="moblieImgUpload.systemName"
                          :limit="moblieImgUpload.limit"
                          :prop="mobileFileList"
                          configGroup="moblieImgUpload.configGroup"
                          ref="moblieImgUploader"
                          v-model="mobileFileList" />
      </a-form-item>

      <a-form-item label="移动端登录页背景图"
                   v-if="!enabled">
        <z-image-uploader :isQuery="moblieBackGroundImgUpload.isQuery"
                          :showUploadList="moblieBackGroundImgUpload.showUploadList"
                          :parentId="parentId"
                          :bucketName="moblieBackGroundImgUpload.bucketName"
                          :systemName="moblieBackGroundImgUpload.systemName"
                          :limit="moblieBackGroundImgUpload.limit"
                          :prop="mobileBackGroundImgList"
                          configGroup="moblieBackGroundImgUpload.configGroup"
                          ref="backGroundImgUploader"
                          v-model="mobileBackGroundImgList" />
      </a-form-item>
      <a-divider />
      <a-form-item help="启用后登录增加图形验证码验证"
                   label="图形验证码">
        <z-switch-one-zero checked-children="是"
                           un-checked-children="否"
                           v-decorator="['graphicalgCode', {
                             initialValue: '1'
                           }]" />
      </a-form-item>

      <a-form-item help="达到登录失败次数显示校验图形验证码，空为直接显示"
                   v-show="form.getFieldValue('graphicalgCode') == true"
                   label="失败次数">
        <a-input-number :max="99999"
                        :min="1"
                        style="width:100%;"
                        placeholder="请输入失败次数"
                        v-decorator="['graphicalgLostCount', {
                          rules: [{
                            required: false,
                            message: '请输入失败次数'
                          }]
                        }]" />
      </a-form-item>

      <a-form-item help="启用后登录增加短信验证码验证"
                   label="短信验证码"
                   v-show="enabled!=true">
        <z-switch-one-zero checked-children="是"
                           un-checked-children="否"
                           v-decorator="['sms', {
                             initialValue: '1'
                           }]" />
      </a-form-item>
      <!-- {{form.getFieldValue('smsLostCount') }} -->
      <a-form-item help="短信验证码的有效时长，空为不失效，单位分钟"
                   v-show="form.getFieldValue('sms') == true"
                   label="失效时长">
        <a-input-number :max="99999"
                        :min="1"
                        style="width:100%;"
                        placeholder="请输入失效时长"
                        v-decorator="['smsLostCount', {
                          rules: [{
                            required: false,
                            message: '请输入失效时长'
                          }]
                        }]" />
      </a-form-item>
      <a-form-item help="二次获取短信验证码所需时长，空为没有间隔时长，单位分钟"
                   v-show="form.getFieldValue('sms') == true"
                   label="发送间隔">
        <a-input-number :max="99999"
                        :min="1"
                        style="width:100%;"
                        placeholder="请输入失效时间"
                        v-decorator="['smsIntervalCount', {
                          rules: [{
                            required: false,
                            message: '请输入失效时间'
                          }]
                        }]" />
      </a-form-item>
      <a-divider />
      <a-form-item label="用户锁定">
        <z-switch-one-zero checked-children="是"
                           un-checked-children="否"
                           @change="lockChange"
                           v-decorator="['userLock', {
                             initialValue: '1'
                           }]" />
      </a-form-item>
      <a-form-item label="锁定次数"
                   v-show="form.getFieldValue('userLock') == 1">
        <a-input-number :max="99999"
                        :min="1"
                        style="width:100%;"
                        placeholder="请输入配置密码错误锁定次数"
                        v-decorator="['userLockNum', {
                          rules: [{
                            required: this.form.getFieldValue('userLock') == 1 && enabled,
                            message: '请输入用户锁定次数'
                          }]
                        }]" />
      </a-form-item>
      <a-form-item label="解锁时长"
                   help="用户锁定后，自动解锁时长，单位分钟"
                   v-show="form.getFieldValue('userLock') == 1 && enabled">
        <a-input-number :max="99999"
                        :min="1"
                        style="width:100%;"
                        placeholder="请输入解锁时长"
                        v-decorator="['userLockUnlockTime', {
                          rules: [{
                            required: this.form.getFieldValue('userLock') == 1 && enabled,
                            message: '请输入解锁时长'
                          }]
                        }]" />
      </a-form-item>
      <a-divider />
      <a-form-item label="登录方式">
        <a-checkbox-group v-decorator="['allowPhoneSign1', {
          initialValue: ['1'],
          rules: [{
            required: true,
            message: '请选择登录方式'
          }]
        }]">
          <a-checkbox value="1">
            帐号
          </a-checkbox>
          <a-checkbox value="2">
            手机号
          </a-checkbox>
          <a-checkbox value="3">
            身份证号
          </a-checkbox>
        </a-checkbox-group>

      </a-form-item>

      <a-form-item label="用户有效期">
        <a-date-picker show-time
                       style="width:100%"
                       v-decorator="['userLifetime']"
                       valueFormat="YYYY-MM-DD HH:mm:ss" />
      </a-form-item>
      <a-form-item label="会话失效时间"
                   v-show="enabled">
        <a-input-number :min="1"
                        :precision="0"
                        placeholder="请输入会话失效时间，单位分钟"
                        style="width:100%"
                        v-decorator="['sessionFailureTime']" />
      </a-form-item>
      <a-divider />
      <a-form-item label="密码策略">
        <z-switch-one-zero checked-children="是"
                           un-checked-children="否"
                           v-decorator="['passTactics', {
                             initialValue: '1'
                           }]" />
      </a-form-item>
      <a-form-item label="规则"
                   v-show="form.getFieldValue('passTactics') == 1">
        <a-select allowClear
                  v-decorator="['passRule']"
                  style="width: 100%">
          <a-select-option value="0">无</a-select-option>
          <a-select-option value="1"> 字母+数字 </a-select-option>
          <a-select-option value="2"> 字母+数字+特殊符号 </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item v-show="form.getFieldValue('passTactics') == 1"
                   label="最小长度">
        <a-input-number :max="form.getFieldValue('passTactics') == 1 ? form.getFieldValue('passMinLength'): 20"
                        :min="1"
                        style="width:100%"
                        placeholder="最小不能超过20位"
                        v-decorator="['passMinLength', {
                          rules: [{
                            required: false,
                            message: '请输入最小长度'
                          }]
                        }]" />
      </a-form-item>
      <a-form-item v-show="form.getFieldValue('passTactics') == 1 &&enabled"
                   label="最大长度">
        <a-input-number :min="1"
                        :max="99"
                        style="width:100%"
                        placeholder="最大不能超过99位"
                        v-decorator="['passMaxLength', {
                          rules: [{
                            required: false,
                            message: '请输入最大长度'
                          }]
                        }]" />
      </a-form-item>
      <a-form-item v-show="form.getFieldValue('passTactics') == 1"
                   label="强制改密"
                   help="启用后用户首次登陆必须强制更新密码才能进入系统">
        <z-switch-one-zero checked-children="是"
                           un-checked-children="否"
                           v-decorator="['forceChangepass', {
                             initialValue: '1'
                           }]" />
      </a-form-item>

      <a-form-item v-show="form.getFieldValue('passTactics') == 1"
                   label="定期改密">
        <z-switch-one-zero checked-children="是"
                           un-checked-children="否"
                           v-decorator="['changepassBytime',{
                             initialValue: '1'
                           }]" />
      </a-form-item>

      <a-form-item v-show="
                     form.getFieldValue('changepassBytime') == 1 &&
                       form.getFieldValue('passTactics') == 1
                   "
                   label="有效期"
                   help="配置密码有效期，精确到天">
        <a-input-number style="width:100%;"
                        :max="99999"
                        :min="1"
                        placeholder=""
                        v-decorator="['changepassDate',{
                          rules: [{
                            required: false,
                            message: '请输入配置密码有效期，精确到天'
                          }]
                        }]" />
      </a-form-item>
      <a-form-item v-show="
                     form.getFieldValue('changepassBytime') == 1 && form.getFieldValue('passTactics') == 1"
                   label="到期前提醒"
                   help="配置密码到期前提醒，精确到天">
        <a-input-number :max="99"
                        :min="1"
                        style="width:100%;"
                        placeholder=""
                        v-decorator="[ 'remindChangepass',{
                          rules: [{
                            required: false,
                            message: '请输入配置密码到期前提醒，精确到天'
                          }]
                        }]" />
      </a-form-item>
      <a-divider v-show="enabled" />
      <a-form-item label="日志容量"
                   v-show="enabled">
        <a-input-number :min="0"
                        style="width:100%;"
                        placeholder="日志容量设置，单位Gb"
                        v-decorator="['logsMax']" />
      </a-form-item>
      <a-form-item label="预警百分比"
                   v-show="enabled">
        <a-input-number :max="100"
                        placeholder="日志达到日志容量的百分比，预警"
                        :min="0"
                        style="width:100%;"
                        v-decorator="[ 'warningProportion']" />
      </a-form-item>
      <!-- <a-form-item label="清除缓存"
                   help="设置需要清除缓存的用户">
        <a-button type="primary"
                  action
                  @click="setStorage">清除</a-button>
      </a-form-item> -->
    </a-form>

    <div style="text-align:center; padding:30px">
      <a-button type="primary"
                action
                @click="handleSave"
                style="width:80px;">保存</a-button>
    </div>
    <!-- <a-modal title="清除缓存"
             :visible="visible"
             @ok="handleOk"
             @cancel="handleCancel">
      <a-form :label-col="{ span: 6 }"
              :wrapper-col="{ span: 18 }">
        <a-form-item label="清除缓存名称">
          <a-input v-model="storageValue"
                   style="width:80%"
                   placeholder="请输入需要清除缓存的名称" />
        </a-form-item>
      </a-form>
    </a-modal> -->
  </page-card>
</template>

<script>
// import { ImageUploader } from 'zenith-vue-components'
import { getSysSystemSettingInfo, saveOrUpdateSettingInfo, removecache } from '../../api/setting'
import { getSyProperties } from '../../api/mj/index'

export default {
  data () {
    return {
      enabled: false, // 判断是否打开suanyuan
      level: null, // 判断等级
      data: [],
      parentId: '',
      changepassBytimeShow: 1,
      fileList: [],
      backGroundImgList: [],
      mobileFileList: [],
      mobileBackGroundImgList: [],
      imgUpload: {
        limit: 1,
        parentId: '',
        fileList: [], // 图片列表集合
        isQuery: false, // 当此参数为true时表示其功能不可上传图片
        showUploadList: true, // 是否显示图片列表
        bucketName: 'zongheng-system', // 当前归属系统所在的空间名称
        systemName: 'ykz-system', // 归属系统名称
        configGroup: 'pc_system_setting_logo'
      },
      backGroundImgUpload: {
        limit: 1,
        parentId: '',
        fileList: [], // 图片列表集合
        isQuery: false, // 当此参数为true时表示其功能不可上传图片
        showUploadList: true, // 是否显示图片列表
        bucketName: 'zongheng-system', // 当前归属系统所在的空间名称
        systemName: 'ykz-system', // 归属系统名称
        configGroup: 'pc_system_setting_background'
      },
      moblieImgUpload: {
        limit: 1,
        parentId: '',
        fileList: [], // 图片列表集合
        isQuery: false, // 当此参数为true时表示其功能不可上传图片
        showUploadList: true, // 是否显示图片列表
        bucketName: 'zongheng-system', // 当前归属系统所在的空间名称
        systemName: 'ykz-system', // 归属系统名称
        configGroup: 'mobile_system_setting_logo'
      },
      moblieBackGroundImgUpload: {
        limit: 1,
        parentId: '',
        fileList: [], // 图片列表集合
        isQuery: false, // 当此参数为true时表示其功能不可上传图片
        showUploadList: true, // 是否显示图片列表
        bucketName: 'zongheng-system', // 当前归属系统所在的空间名称
        systemName: 'ykz-system', // 归属系统名称
        configGroup: 'mobile_system_setting_background'
      },
      form: this.$form.createForm(this),
      //
      // visible: false,
      storageValue: ''
    }
  },
  // components: {
  //   ImageUploader
  // },
  mounted () {
    this.getSystemSettingInfo()
  },
  methods: {
    // 1设置缓存方法
    // setStorage () {
    //   this.visible = true
    // },
    // handleOk (e) {
    //   if (!this.storageValue) {
    //     this.message.warn('请输入需要清除缓存的名称')
    //     return
    //   }
    //   removecache({ 'key': this.storageValue.trim() }).then(res => {

    //   })
    // },
    // handleCancel (e) {
    //   this.visible = false
    // },
    getSystemSettingInfo () {
      getSysSystemSettingInfo().then((response) => {
        response.allowPhoneSign1 = response.allowPhoneSign.split(',')
        const values = {}
        for (const k in this.form.fieldsStore.fieldsMeta) {
          // eslint-disable-next-line no-prototype-builtins
          response.hasOwnProperty(k) && (values[k] = response[k])
        }
        this.form.setFieldsValue(values)
        this.parentId = response.id

        // 判断是否开启sanyuan
        this.getSyProperties()
      })
    },
    lockChange (value) {
      if (value == 2) {
        this.form.setFieldsValue({
          userLockNum: 1
        })
      }
    },
    handleSave () {
      this.form.validateFieldsAndScroll((err, values) => {
        values.allowPhoneSign = values.allowPhoneSign1.toString()
        if (err) {
          return
        }
        // if (this.fileList.length == 0) {
        //   this.message.warn('请上传系统logo')
        //   return
        // }
        // if (this.backGroundImgList.length == 0) {
        //   this.message.warn('请上传登录页背景图')
        //   return
        // }
        // if (this.mobileFileList.length == 0) {
        //   this.message.warn('请上传移动端系统banner')
        //   return
        // }
        // if (this.mobileBackGroundImgList.length == 0) {
        //   this.message.warn('请上传移动端登录页背景图')
        //   return
        // }
        if (this.fileList.length > 0) {
          values.logo = this.fileList[0].url
        }
        values.fileList = this.fileList

        if (this.backGroundImgList.length > 0) {
          values.backGroundImg = this.backGroundImgList[0].url
        }
        values.backGroundImgList = this.backGroundImgList

        if (this.mobileFileList.length > 0) {
          values.mobileLogo = this.mobileFileList[0].url
        }
        values.mobileFileList = this.mobileFileList

        if (this.mobileBackGroundImgList.length > 0) {
          values.mobileBackGroundImg = this.mobileBackGroundImgList[0].url
        }
        values.mobileBackGroundImgList = this.mobileBackGroundImgList

        saveOrUpdateSettingInfo(values).then((response) => {
        })
      })
    },
    async getSyProperties () {
      await getSyProperties().then(res => {
        this.enabled = res.enabled
        this.level = res.level.toLocaleUpperCase()
      })
    }
  }
}
</script>

<style scope lang="less">
</style>
